<template>
  <div class="audit-agent-change-view">

    <el-form
      :inline="true"
    >

      <el-row>

        <el-col :span="8">
          <el-form-item label="流程编号">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建时间">
            {{ dateFormat('yyyy-mm-dd',detailData.startTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="代理商信息" />

    <el-form :inline="true" label-position="right" size="small" class="filter-form-inline">
      <el-row style="margin-left: 0px;margin-right:0px;">
        <el-col :span="8">
          <el-form-item label="代理商编号：" style="width: 100%;">
            <span>{{ datas.New.agentNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理商名称：" style="width: 100%;">
            <div v-if="datas.compareChange.agentName">
              <span>{{ datas.Old.agentName }} -> {{ datas.New.agentName }}</span>
            </div>
            <div v-else>{{ datas.New.agentName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理商级别：" style="width: 100%;">
            <div v-if="datas.compareChange.agentLevel">
              <span>{{ getLabel('agent_level',datas.Old.agentLevel) }} -> {{ getLabel('agent_level',datas.New.agentLevel) }}</span>
            </div>
            <div v-else>{{ getLabel('agent_level',datas.New.agentLevel) }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在地区：" style="width: 100%;">

            <div v-if="datas.compareChange.provinceName || datas.compareChange.cityName || datas.compareChange.areaName">
              <span>{{ datas.Old.provinceName }}/{{ datas.Old.cityName }}/{{ datas.Old.areaName }} ->
                {{ datas.New.provinceName }}/{{ datas.New.cityName }}/{{ datas.New.areaName }}</span>
            </div>
            <div v-else>{{ datas.New.provinceName }}/{{ datas.New.cityName }}/{{ datas.New.areaName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址：" style="width: 100%;">
            <div v-if="datas.compareChange.address">
              <span>{{ datas.Old.address }} -> {{ datas.New.address }}</span>
            </div>
            <div v-else>{{ datas.New.address }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="统一社会信用代码：" style="width: 100%;">

            <div v-if="datas.compareChange.creditCode">
              <span>{{ datas.Old.creditCode }} -> {{ datas.New.creditCode }}</span>
            </div>
            <div v-else>{{ datas.New.creditCode }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人：" style="width: 100%;">

            <div v-if="datas.compareChange.userName">
              <span>{{ datas.Old.userName }} -> {{ datas.New.userName }}</span>
            </div>
            <div v-else>{{ datas.New.userName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话：" style="width: 100%;">

            <div v-if="datas.compareChange.tel">
              <span>{{ datas.Old.tel }} -> {{ datas.New.tel }}</span>
            </div>
            <div v-else>{{ datas.New.tel }}</div>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <el-form :inline="true" label-position="right" size="small" class="filter-form-inline">
      <el-form-item label="营业执照：" style="width: 100%;">
        <div style="display: flex">
          <filesUploadView :list="datas.New.businessLicenseFiles" disabled />
          <!--                    <image-upload-view v-for="(item,index) in datas.businessLicenseFiles" :data="item" :key="index" disabled></image-upload-view>-->
        </div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
// 签约代理商信息变更
import {defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'AgentChange',
  props: {
    detailData: {
      type: Object,
      default: {}
    }

  },
  setup(props) {
    var data = reactive({
      files: [],
      datas: {
        New: {},
        Old: {},
        compareChange: {}
      }
    })

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval && newval.data && newval.data.New) {
          console.log(newval.data)
          data.datas = newval.data
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data)
    }
  }
})
</script>

<style scoped>

</style>
